import React, { lazy, Suspense } from "react";
// 引入组件
import "./App.css";
// 打开 antd-mobile 的文档
// 安装：yarn add antd-mobile
// 在 App.js 根组件中导入要使用的组件
// 渲染组件
// 在 index.js 中导入组件库样式
import { BrowserRouter as Router, Route, NavLink, Link, Redirect } from "react-router-dom";

//  引入 homeIndex 和CityList 组件
// import Home from './pages/Home/index'
// import CityList from './pages/CityList/index'

// //  引入map组件
// import MapIndex from './pages/Map'

// // 引入login组件
// import LoginIndex from './pages/Login/index'

// import AuthRoute from './components/AuthRoute/index鉴权架构代码'

import AuthRoute from "./components/AuthRoute/index";

//这个组件需要登录才能看到
// import    Rent from './pages/Rent/index'

const Rent = React.lazy(() => import("./pages/Rent/index"));

const Home = React.lazy(() => import("./pages/Home/index"));
const CityList = React.lazy(() => import("./pages/CityList/index"));
const MapIndex = React.lazy(() => import("./pages/Map"));
const LoginIndex = React.lazy(() => import("./pages/Login/index"));

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Router>
                    <Suspense fallback={<div className="route-loading">loading...</div>}>
                        {/*  使用路由 */}
                        <Route path="/home" component={Home}></Route>
                        <Route path="/citylist" component={CityList}></Route>

                        <Route path="/map" component={MapIndex}></Route>

                        {/*  添加login路由组件 */}
                        <Route path="/login" component={LoginIndex}></Route>

                        <Route path="/" exact render={() => <Redirect to="/home" />} />

                        {/* 配置登录后，才能访问的页面 */}
                        <AuthRoute
                            exact
                            path="/rent"
                            component={Rent}
                            title="我是登录后可以看到的rent组件"
                        />

                        {/* <AuthRoute exact   path="/bbb"   component={Rent}  title='我是登录后可以看到的rent组件' /> */}
                        {/* <AuthRoute exact   path="/rent/aaa"   component={Rent}  title='我是登录后可以看到的rent组件' /> */}
                    </Suspense>
                </Router>
            </div>
        );
    }
}

export default App;
